<template>

  <div class="container">
    <div class="container_head">
      <el-row :gutter="20">
        <el-col :span="6">
          <h3 class="myH3">课程</h3>
        </el-col>
        <el-col :span="6">
          <el-input placeholder="请输入搜索内容" v-model="formSearch.coursename" suffix-icon="el-icon-search"
                    @keyup.enter.native="search" class="sousuo">
            <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <h3 class="tongzhi">通知</h3>
        </el-col>
      </el-row>
    </div>
    <div class="container_body">
      <el-row :gutter="24">
        <el-col :span="17" style="height: 100px">
          <!--          循环的内容-->
          <div class="container_body1" v-for="cources in ccInfo" :key="cources.courceId">
            <el-row>
              <el-col :span="8" style="width: 300px">
                <div>
                  <img src="img/login2.jpg" style="height: 170px;">
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <h3>课程名：{{ cources.courceName }}</h3>
                  <h4 style="color: #606266">任课教师：{{cources.userName}}</h4>
                </div>
              </el-col>
            </el-row>
          </div>

        </el-col>
        <el-col :span="7">
          <div class="container_body2" @click="toGlobalNotice">
            <div v-for="(notice,index) in noticeList" :key="index" class="simple_notice_wrap">
              <div class="simple_notice_title">{{ notice.noticeTitle }}</div>
              <div class="simple_notice_content">{{ notice.noticeContent.substring(0, 15) + '...' }}</div>
              <div class="simple_notice_time">{{ dateFormat(notice.updateTime) }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: "TestKJStudent",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      noticeList: [],
      formSearch: {
        coursename: '',
        userId: JSON.parse(window.localStorage.getItem('user')).userId,
      }
      ,
      ccInfo: [],
    };
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    search() {
      var _this = this;
      axios.post('http://localhost:8080/userinfo/findFuzzyQueryCourse', this.formSearch).then(res => {
        console.log(res)
        _this.ccInfo = res.data.data
        console.log("res.data.data")
        console.log(res.data.data)
        console.log(_this.ccInfo)
        console.log("_this.ccInfo")
      })
    }, toGlobalNotice() {
      this.$router.push({
        path: '/noticeList',
        query: {
          noticeType: 0
        }
      });
    }
  }, created() {
    this.search();
    //获取前五条全局通知
    const _this = this;
    axios.get('http://localhost:8080/notice/listGlobal/1/5').then(function (res) {
      _this.noticeList = res.data.data.content
      console.log(_this.noticeList);
    })
  }
}
</script>

<style scoped>
.container {
  height: 570px;
  margin-bottom: 30px;
}

.container_head {

}

.container_body1 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  height: 170px;
  width: 77.6%;
  margin-left: 225px;
  background-color: white;
  padding: 20px;
  shadow: hover;
  margin-bottom: 20px;
  color: black;
}

.container_body1:hover {
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}


.container_body2 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  text-align: left;
  height: 500px;
  width: 70%;
  margin-left: 13px;
  margin-top:0px;
  padding: 10px;
  border-radius: 10px;
  /*margin-right:60px;*/
  /*background-color: #ccc;*/
  color: black;
}

.container_body2:hover {
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.simple_notice_wrap {
  background-color: white;
  width: 90%;
  margin: 10px auto;
  height: 80px;
  padding-top: 10px;
  padding-left: 20px;
  border-radius: 10px;
  /*border: 1px solid black;*/
}

.simple_notice_title {

  color: #f34545;
  font-weight: bold;
  font-size: 18px;
}

.simple_notice_content {
  margin-top: 3px;

}

.simple_notice_time {
  text-align: right;
  margin: 10px;
  /*margin-right: 6px;*/
  font-size: 15px;
  color: #888;
}


.myH3 {
  margin-left: 91px

}

.sousuo {
  width: 250px;
  margin-left: 500px;
  margin-top: 12px
}

.tongzhi {
  margin-left: 220px
}
</style>